<!DOCTYPE html>
<ui:composition template="/master.xhtml"
 xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:define name="content">
	<h:form id="form"
		onkeypress="if (event.keyCode == 13) {return false; }">
		
		<p:growl id="msgs" showDetail="true" life="5000" />
		<p:panel id="basic" header="Provincias" style="width:600px">

			<p:dataTable id="singleDT" var="pv"
				value="#{provinciaBean.listProvincia}"
				selection="#{provinciaBean.provinciaSelected}"
				rowKey="#{pv.nombreProvincia}" editable="true" style="width:100%"
				rows="5" paginator="true" paginatorPosition="bottom"
				paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
				
				<p:ajax event="rowEdit" listener="#{provinciaBean.onRowEdit}"
					 />
				<p:ajax event="rowEditCancel" listener="#{provinciaBean.onRowCancel}"
					 />
				
				<!-- 
				<f:facet name="header">
					<p:outputPanel style="text-align:right">
						<h:outputText value="Buscar: " />
						<p:inputText id="globalFilter" onkeyup="" style="width:150px"
							placeholder="Enter keyword" />
					</p:outputPanel>
				</f:facet>
 -->

				<p:column headerText="Provincia">

					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{pv.nombreProvincia}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="provInput" value="#{pv.nombreProvincia}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>

				</p:column>

				<p:column headerText="País">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{pv.pais.nombrePais}" />
						</f:facet>
						<f:facet name="input">
							<p:selectOneMenu id="one" converter="paisConverter"
								style="width:200px" panelStyle="width:200px"
								value="#{pv.pais}" effect="fade" var="p">

								<f:selectItems var="pais" value="#{provinciaBean.listPaises}"
									itemLabel="#{pais.nombrePais}" itemValue="#{pais}" />
								<p:column>
									<h:outputText value="#{p.nombrePais}" />
								</p:column>
							</p:selectOneMenu>
						</f:facet>

					</p:cellEditor>

				</p:column>

				<p:column headerText="Modificar"
					style="width:70px;text-align: center">
					<p:rowEditor />
				</p:column>

				<p:column style="width:70px;text-align: center"
					headerText="Eliminar">
					<p:commandButton process="singleDT" 
						icon="ui-icon-close" title="View"
						action="#{provinciaBean.eliminarProvincia}">
						<f:setPropertyActionListener value="#{pv}"
							target="#{provinciaBean.provinciaSelected}" />

						<p:confirm header="Confirmación" message="Está seguro?"
							icon="ui-icon-alert" />
					</p:commandButton>

					<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
						<p:commandButton value="Yes" type="button"
							styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
						<p:commandButton value="No" type="button"
							styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
					</p:confirmDialog>

				</p:column>
			</p:dataTable>

			<br />

			<p:fieldset legend="Nuevo" toggleable="true" toggleSpeed="500"
				collapsed="true">
				<p:messages id="messages" autoUpdate="false" />
				<h:panelGrid columns="3" cellpadding="5">
					<h:outputLabel value="País:" />

					<p:selectOneMenu id="advanced" converter="paisConverter"
						value="#{provinciaBean.paisSelected}" effect="fade" var="p"
						filter="true" filterMatchMode="startsWith">

						<f:selectItems var="pais" value="#{provinciaBean.listPaises}"
							itemLabel="#{pais.nombrePais}" itemValue="#{pais}" />
						<p:column>
							<h:outputText value="#{p.nombrePais}" />
						</p:column>
					</p:selectOneMenu>
					<h:outputLabel value="" />


					<h:outputLabel value="Provincia:" />
					<p:inputText id="nomProv" required="true" label="Nombre provincia"
						value="#{provinciaBean.provincia.nombreProvincia}"></p:inputText>
					<p:message for="nomProv" display="icon" />
				</h:panelGrid>
				<p:separator id="separator" />
				<p:commandButton value="Guardar" icon="ui-icon-disk"
					action="#{provinciaBean.guardarProvincia}" update="form" />
			</p:fieldset>
		</p:panel>


	</h:form>
</ui:define>
</ui:composition>
